<template>
  <div ref="scrollContainer" class="products fix">
    <!--<div class="navBar">-->
      <!--<div class="back" @click="prevPage">-->
        <!--<span class="iconfont icon-Left"></span>-->
        <!--<span>返回</span>-->
      <!--</div>-->
      <!--<div class="pageName">-->
        <!--产品列表-->
      <!--</div>-->
      <!--<span></span>-->
    <!--</div>-->
    <div class="backPrev" @click="prevPage">
      <span class="iconfont icon-Left returnPrev"></span>
    </div>

    <div v-if="isReturnTopShow" class="backPrev backTop" @click="pageTop">
      <span class="iconfont icon-top returnPrev"></span>
    </div>

    <div class="backPrev backHome" @click="returnIndex">
      <span class="iconfont icon-ybbindex returnPrev"></span>
    </div>

    <ul>
      <li @click="checkDetail(1)">
      <img src="../../assets/images/product.jpg" alt="">
      <div>
        <p class="name">苏泊尔电蒸锅多功能</p>
        <p class="info">
          <span class="price">￥ 999.00</span>
          <span class="stock">库存 999 件</span>
        </p>
      </div>
    </li>
      <li @click="checkDetail(1)">
        <img src="../../assets/images/product.jpg" alt="">
        <div>
          <p class="name">苏泊尔电蒸锅多功能</p>
          <p class="info">
            <span class="price">￥ 999.00</span>
            <span class="stock">库存 999 件</span>
          </p>
        </div>
      </li>
      <li @click="checkDetail(1)">
        <img src="../../assets/images/product.jpg" alt="">
        <div>
          <p class="name">苏泊尔电蒸锅多功能</p>
          <p class="info">
            <span class="price">￥ 999.00</span>
            <span class="stock">库存 999 件</span>
          </p>
        </div>
      </li>
      <li @click="checkDetail(1)">
        <img src="../../assets/images/product.jpg" alt="">
        <div>
          <p class="name">苏泊尔电蒸锅多功能</p>
          <p class="info">
            <span class="price">￥ 999.00</span>
            <span class="stock">库存 999 件</span>
          </p>
        </div>
      </li>
      <li @click="checkDetail(1)">
        <img src="../../assets/images/product.jpg" alt="">
        <div>
          <p class="name">苏泊尔电蒸锅多功能</p>
          <p class="info">
            <span class="price">￥ 999.00</span>
            <span class="stock">库存 999 件</span>
          </p>
        </div>
      </li>
      <li @click="checkDetail(1)">
        <img src="../../assets/images/product.jpg" alt="">
        <div>
          <p class="name">苏泊尔电蒸锅多功能</p>
          <p class="info">
            <span class="price">￥ 999.00</span>
            <span class="stock">库存 999 件</span>
          </p>
        </div>
      </li>
      <li @click="checkDetail(1)">
        <img src="../../assets/images/product.jpg" alt="">
        <div>
          <p class="name">苏泊尔电蒸锅多功能</p>
          <p class="info">
            <span class="price">￥ 999.00</span>
            <span class="stock">库存 999 件</span>
          </p>
        </div>
      </li>
      <li @click="checkDetail(1)">
        <img src="../../assets/images/product.jpg" alt="">
        <div>
          <p class="name">苏泊尔电蒸锅多功能</p>
          <p class="info">
            <span class="price">￥ 999.00</span>
            <span class="stock">库存 999 件</span>
          </p>
        </div>
      </li>
      <li @click="checkDetail(1)">
        <img src="../../assets/images/product.jpg" alt="">
        <div>
          <p class="name">苏泊尔电蒸锅多功能</p>
          <p class="info">
            <span class="price">￥ 999.00</span>
            <span class="stock">库存 999 件</span>
          </p>
        </div>
      </li>
      <li @click="checkDetail(1)">
        <img src="../../assets/images/product.jpg" alt="">
        <div>
          <p class="name">苏泊尔电蒸锅多功能</p>
          <p class="info">
            <span class="price">￥ 999.00</span>
            <span class="stock">库存 999 件</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import { getProducts } from '../../api/getProducts'

  export default {
    name: '',
    data () {
      return {
        isReturnTopShow: false,
        box: null,
        category_id: null
      }
    },
    created () {
      this.category_id = this.$route.params.categoryId
      console.log(this.category_id)
      this.getProductsByCategory(this.category_id)
    },
    methods: {
      getProductsByCategory (id) {
        var param
        if (id === 0) {
          param = {}
        } else {
          param = {
            category_id: id
          }
        }
        getProducts(param).then(res => {
          console.log(res)
        })
      },
      prevPage () {
        this.$router.go(-1)
      },
      pageTop () {
        // this.box.scrollTop = 0
        var scrolling = setInterval(() => {
          this.box.scrollTop -= 10
          if (this.box.scrollTop <= 0) {
            clearInterval(scrolling)
            scrolling = null
          }
        }, 5)
      },
      returnIndex () {
        this.$router.push('/category')
      },
      checkDetail (id) {
        this.$router.push('/detail/' + id)
      }
    },
    mounted () {
      this.box = this.$refs.scrollContainer
      this.box.addEventListener('scroll', () => {
        console.log('scroll' + this.$refs.scrollContainer.scrollTop)
        console.log(window.innerHeight)
        this.isReturnTopShow = this.box.scrollTop > window.innerHeight / 2
      })
    }
  }
</script>

<style scoped lang="less">
  .products {
    background-color: #f5f5f5;
    height: 100vh;
    overflow: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      height: 100vh;
      /*margin-top: 45px;*/
      width: 100%;
      box-sizing: border-box;
      padding: 5px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;

      li {
        width: 49.2%;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 0 10px 1px rgba(0,0,0,.05);
        margin-bottom: 5px;
        img {
          width: 100%;
        }
        .name {
          padding: 10px 5px 3px 10px;
          font-size: 12px;
          line-height: 20px;
          max-height: 20px;
          overflow: hidden;

        }
        .info {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          padding: 0 12px 5px 10px;
          .price {
            color: #FF6B01;
            font-size: 14px;
          }
          .stock {
            font-size: 12px;
            color: #808080;
          }
        }
      }
    }
  }

</style>
